// vue
// vue-router
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

// 实例化路由
// 导入路由组件 vue-cli 脚手架中 @  表示src的目录 底层是webpack的配置
// 静态引入

import  List from "@/views/list/List.vue"
import  News from "@/views/news/News.vue"
import  NotFound from "@/views/NotFound.vue"
// 实例化路由
const router  = new VueRouter({
  mode:"hash",  // history  h5模式 不带有# hash 带有#
  // 路由规则 等待url路径进行匹配
  routes:[
    {path:'/',redirect:"/home"},
    // 动态引入组件
    {
     path:'/home',
     component:() => import("@/views/home/Home.vue"),
     children:[
      {path:'/home',redirect:"/home/add"},
        {
          // 如果不是绝对路径 表示和父级路径进行拼接
          path:'add',
          component:() => import("@/views/home/Add.vue"),
        },
        {
          path:'/home/edit',
          component:() => import("@/views/home/Edit.vue"),
        },
        {
          path:'/home/del',
          component:() => import("@/views/home/Del.vue"),
        }
     ]
    },
    {path:'/news',component:News},
    {path:'/list',component:List},
    {path:'/params',name:"params",component:() => import("@/views/Params.vue")},
    {path:'/params/:id/:name',name:"params",component:() => import("@/views/Params.vue")},
    {path:'*',component:NotFound}
  ],
  // 更改active的属性
  linkActiveClass:"my-active",
  linkExactActiveClass:"my-exact-active"
});



// 导出路由
export default router